﻿<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>SiteServer 管理后台</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="../assets/images/favicon.png" rel="icon" type="image/png">
  <link href="../assets/css/font-awesome-4.7.0.min.css" rel="stylesheet" type="text/css" />
  <link href="../assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="../assets/css/siteserver.min.css" rel="stylesheet" type="text/css" />
  <style>
    .nav .nav-link {
    font-weight: normal;
    border-radius: 1.25rem;
    font-size: 14px;
  }
</style>
</head>

<body class="p-0">

  <div id="main" class="m-t-15 m-b-15 m-l-15 m-r-15">

    <template v-if="pageLoad">

      <ul class="nav nav-pills nav-justified mb-3">

        <li class="nav-item">
          <a class="nav-link" :class="{active: pageType === 'list'}" @click="btnPageTypeClick('list')" href="javascript:;">内容图片管理</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" :class="{active: pageType === 'upload'}" @click="btnPageTypeClick('upload')" href="javascript:;">内容图片上传</a>
        </li>
        <li class="nav-item" v-if="config.returnUrl">
          <a class="nav-link" :href="config.returnUrl">返回列表</a>
        </li>

      </ul>

      <div v-if="pageAlert" class="alert" :class="{ 'alert-warning': pageAlert.type === 'warning', 'alert-success': pageAlert.type === 'success', 'alert-danger': pageAlert.type === 'danger' }">
        <button v-on:click="pageAlert = null" class="close" data-dismiss="alert">×</button>
        <span v-html="pageAlert.html"></span>
      </div>

      <template v-if="pageType === 'list'">
        <div class="row m-2">
          <div class="col-sm-4 col-lg-3 col-xs-12" v-for="(photo, index) in photos">

            <div class="card m-b-20">

              <a :href="photo.largeUrl" target="_blank">
                <img class="card-img-top img-fluid" :src="photo.middleUrl">
              </a>

              <div class="card-body">
                <p class="card-text" :style="{ display: photo.description ? '' : 'none' }" style="display: none">
                  {{ photo.description }}
                </p>
                <a @click="describe(photo)" href="javascript:;" class="card-link text-success">
                  {{ photo.description ? '修改说明' : '添加说明' }}
                </a>
                <a @click="order(photo, index)" href="javascript:;" class="card-link text-success">排 序</a>
                <a @click="del(photo)" href="javascript:;" class="card-link text-danger">删 除</a>
              </div>

            </div>

          </div>

          <div class="modal" tabindex="-1" role="dialog" :style="{ display: op === 'describe' && photo ? 'block' : 'none' }"
            style="display: none;top: 100px;">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title">图片说明</h4>
                </div>
                <div class="modal-body">
                  <div class="input-group">
                    <textarea class="form-control" style="height: 150px" v-model="description"></textarea>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" @click="saveDescription" class="btn btn-primary">保 存</button>
                  <button type="button" @click="close" class="btn btn-secondary" data-dismiss="modal">取 消</button>
                </div>
              </div>
            </div>
          </div>
          <div class="modal" tabindex="-1" role="dialog" :style="{ display: op === 'order' && photo ? 'block' : 'none' }"
            style="display: none;top: 100px;">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title">图片排序</h4>
                </div>
                <div class="modal-body">
                  <div class="input-group">
                    <select class="form-control" v-model="indexNew">
                      <option disabled value="">请选择图片排序</option>
                      <option v-for="(photo, index) in photos" :value="index">{{index + 1}}</option>
                    </select>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" @click="saveTaxis" class="btn btn-primary">保 存</button>
                  <button type="button" @click="close" class="btn btn-secondary" data-dismiss="modal">取 消</button>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-backdrop show fade" :style="{ display: op && photo ? 'block' : 'none' }"></div>

        </div>
      </template>
      <template v-else>
        <div class="card-box">
          <div class="row">
            <div class="col-lg-12">
              <h4 class="m-t-0 header-title">
                <b>上传内容图片</b>
              </h4>
              <p class="text-muted font-13 m-b-10">
                可选择多幅图片一次上传
              </p>
            </div>
          </div>

          <div id="drop-area" style="height: 200px; line-height: 200px; text-align: center; font-size: 18px; color: #777; border: 2px dashed #0000004d;
						background: #fff;	border-radius: 6px; cursor: pointer; margin-bottom: 20px">
            点击选择上传图片或者将图片拖拽到此区域
          </div>

        </div>
      </template>

    </template>

    <template v-else>
      <div class="text-center" style="margin-top: 100px">
        <img class="mt-3" src="../assets/images/loading.gif" />
        <p class="lead mt-3 text-nowrap">载入中，请稍后...</p>
      </div>
    </template>

  </div>

</body>

</html>

<script src="../assets/lib/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../assets/lib/popper.min.js"></script>
<script src="../assets/lib/bootstrap.min.js"></script>
<script src="../assets/lib/lodash-4.17.10.min.js" type="text/javascript"></script>
<script src="../assets/lib/layer-3.1.1/layer.js" type="text/javascript"></script>
<script src="../assets/lib/sweetalert2-7.28.4.all.min.js" type="text/javascript"></script>
<script src="../assets/lib/vue-2.5.16.min.js" type="text/javascript"></script>
<script src="../assets/lib/vee-validate-2.1.0.js"></script>
<script src="../assets/lib/vee-validate-locale-zh_CN-2.1.0.js"></script>
<script src="../assets/lib/js.cookie-2.2.0.js"></script>
<script type="text/javascript" src="../assets/lib/web-uploader/js/Q.js"></script>
<script type="text/javascript" src="../assets/lib/web-uploader/js/Q.Uploader.js"></script>
<script src="../assets/js/utils.js" type="text/javascript"></script>
<script src="photos.js" type="text/javascript"></script>